<ng-include src="'partials/navbar.html'"></ng-include>

<div class="container">
  <ol class="breadcrumb">
    <li><a href="/#/applications">Applications</a></li>  
    <li>{{ application.appEUI }}</li>
    <li class="active">nodes</li>
  </ol>

  <table class="table table-hover">
    <thead>
      <th>DevEUI</th>
      <th>AppKey</th>
      <th class="text-right">Actions</th>
    </thead>
    <tbody>
      <tr ng-repeat="node in nodes">
        <td>{{ node.devEUI }}</td>
        <td>{{ node.appKey }}</td>
        <td class="text-right">
          <a class="btn btn-sm btn-default" ng-click="editNodeSession(node)">Session / ABP</a>
          <a class="btn btn-sm btn-default" ng-click="editNode(node)">Edit</a>
          <button class="btn btn-sm btn-danger" ng-click="deleteNode(node)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default" ng-click="createNode()">Create node</button>
  </div>
</div>

<div class="modal fade" id="editNodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit {{ node.devEUI }}</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="appKey" class="control-label">AppKey:</label>
            <input type="text" class="form-control" id="appKey" ng-model="node.appKey">
          </div>
          <div class="form-group">
            <label for="rxDelay" class="control-label">RXDelay:</label>
            <input type="number" class="form-control" id="rxDelay" ng-model="node.rxDelay">
            <p class="help-block">When left to 0, the default delay will be used.</p>
          </div>
          <div class="form-group">
            <label for="rx1DROffset" class="control-label">RX1 DR Offset:</label>
            <input type="number" class="form-control" id="rx1DROffset" ng-model="node.rx1DROffset">
          </div>
          <div class="form-group">
            <label for="channelList" class="control-label">Channel-list:</label>
            <select class="form-control" id="channelList" ng-model="node.channelListID" ng-options="channelList.id as channelList.name for channelList in channelLists">
              <option value=""></option>
            </select>
            <p class="help-block">
              Leave blank for the default channels (defined by the LoRaWAN specs).
              Note that this option might not be available for your region.
            </p>
          </div>
        </form>
      </div>
      <div class="modal-footer">
      <div class="pull-left text-danger" ng-if="error">{{ error }}</div>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="updateNode(node)">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="createNodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Create node</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="devEUI" class="control-label">DevEUI:</label>
            <input type="text" class="form-control" id="devEUI" ng-model="node.devEUI">
          </div>
          <div class="form-group">
            <label for="appKey" class="control-label">AppKey:</label>
            <input type="text" class="form-control" id="appKey" ng-model="node.appKey">
          </div>
          <div class="form-group">
            <label for="rxDelay" class="control-label">RXDelay:</label>
            <input type="number" class="form-control" id="rxDelay" ng-model="node.rxDelay">
            <p class="help-block">When left to 0, the default delay will be used.</p>
          </div>
          <div class="form-group">
            <label for="rx1DROffset" class="control-label">RX1 DR Offset:</label>
            <input type="number" class="form-control" id="rx1DROffset" ng-model="node.rx1DROffset">
          </div>
          <div class="form-group">
            <label for="channelList" class="control-label">Channel-list:</label>
            <select class="form-control" id="channelList" ng-model="node.channelListID" ng-options="channelList.id as channelList.name for channelList in channelLists">
              <option value=""></option>
            </select>
            <p class="help-block">
              Leave blank for the default channels, as defined by the LoRaWAN specs.
              Note that depending upon your region, setting a channel-list might not be available.
            </p>
          </div>
        </form>
      </div>
      <div class="modal-footer">
      <div class="pull-left text-danger" ng-if="error">{{ error }}</div>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="createNode(node)">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="nodeSessionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Node session for {{ ns.devEUI }}</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="devAddr" class="control-label">DevAddr:</label>
            <button type="button" class="btn btn-default btn-xs pull-right" ng-click="getRandomDevAddr(ns)">generate</button>
            <input type="text" class="form-control" id="devAddr" ng-model="ns.devAddr">
          </div>
          <div class="form-group">
            <label for="appSKey" class="control-label">AppSKey:</label>
            <input type="text" class="form-control" id="appSKey" ng-model="ns.appSKey">
          </div>
          <div class="form-group">
            <label for="nwkSKey" class="control-label">NwkSKey:</label>
            <input type="text" class="form-control" id="nwkSKey" ng-model="ns.nwkSKey">
          </div>
          <div class="form-group">
            <label for="fCntUp" class="control-label">FCnt (up):</label>
            <input type="number" class="form-control" id="fCntUp" ng-model="ns.fCntUp">
          </div>
          <div class="form-group">
            <label for="fCntDown" class="control-label">FCnt (down):</label>
            <input type="number" class="form-control" id="fCntDown" ng-model="ns.fCntDown">
          </div>
          <div class="form-group">
            <label for="rxDelay" class="control-label">RXDelay:</label>
            <input type="number" class="form-control" id="rxDelay" ng-model="ns.rxDelay">
            <p class="help-block">When left to 0, the default delay will be used.</p>
          </div>
          <div class="form-group">
            <label for="rx1DROffset" class="control-label">RX1 DR Offset:</label>
            <input type="number" class="form-control" id="rx1DROffset" ng-model="ns.rx1DROffset">
          </div>
          <div class="form-group">
            <label for="devEUI" class="control-label">DevEUI:</label>
            <input type="text" class="form-control" id="devEUI" ng-model="ns.devEUI" disabled>
          </div>
          <div class="form-group">
            <label for="appEUI" class="control-label">AppEUI:</label>
            <input type="text" class="form-control" id="appEUI" ng-model="ns.appEUI" disabled>
          </div>
        </form>
      </div>
      <div class="modal-footer">
      <div class="pull-left text-danger" ng-if="error">{{ error }}</div>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="updateNodeSession(ns)">Save changes</button>
      </div>
    </div>
  </div>
</div>
